<template>
  <div class="sWidth">
    <el-row>
      <el-col :span="12"><div class="grid-content error-left">
        <img src="../../images/404.png" height="300" width="300"/>
      </div></el-col>
      <el-col :span="12"><div class="grid-content error-right">
        <div class="error-title">好像出现了一些错误</div>
        <p>请检查：</p>
        <p><span>▪</span>检查网线、路由器是否连接好</p>
        <p><span>▪</span>重新连接到Wi-Fi网络</p>
        <div class="refrash" @click="back()">尝试重新加载</div>
      </div></el-col>
    </el-row>
  </div>
</template>
<script>
    export default {
        name: "error404",
        methods:{
          back(){
            this.$router.push({ path: '/home' })
          }
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~style/base"
  .error-left
    text-align right
    padding-right 40px
  .error-right
    padding-left 40px
    p
      font-size $font-size-medium-x
      color $color-text-mt
      margin 20px 0
      span
        margin 0 10px
        color $color-theme
        font-weight bold
    .refrash
      width 144px
      height 44px
      background rgba(255,98,82,1)
      border-radius 4px
      font-size $font-size-large
      color $color-text
      line-height 44px
      text-align center
      margin-top 50px
      cursor pointer
  .error-title
    font-size 26px
    color rgba(32,32,32,1)
    margin 30px 0
  .sWidth
    padding-top 80px
</style>
